<template>
	<view>
		<template v-if="PingLun_LieBiao_JiaZai_ZhuangTai=='YouShuJu'">
			<view class="YouRan-UI-LieBiao-3" style="padding-bottom: 1rpx;">
				<view
					@click="$_TiaoZhuan('_XiangQing_TieZi/_XiangQing_TieZi_PingLun?cid='+item.cid)"
					class="XunHuan Flex" v-for="item in PingLun_LieBiao">
					<view
						class="Zuo"
						@click.stop="$_TiaoZhuan('_XiangQing_YongHu/_XiangQing_YongHu?uid=' + item.creator.uid)">
						<image :src="item.creator.avatar" mode="widthFix"></image>
					</view>
					<view class="You">
						<view class="NiCheng Zt-ShenLanSe">{{item.creator.nickname}}
						
						<text class="P" :style="item.creator.nicknameColor?'color:'+item.creator.nicknameColor+';':''">{{item.creator.roleName}}</text>
						</view>
						<!-- 文字摘要 -->
						<view class="ZhaiYao"><text class="iconfont icon-yuyin" v-if="item.fileCount.audios"></text>{{$_GuoLv_HTML(item.content)}}</view>
						<!-- 图片 -->
						<view class="TuPian Flex" v-if="item.fileCount.images">
							<view v-for="(item_Tu,index) in item.files.images">
								<image :src="item_Tu.imageSquareUrl" mode="widthFix"></image>
							</view>
						</view>
						<view class="TieZi-XinXi Flex">
							<text class="P">{{item.createTimeFormat}}</text>
						</view>
						<view class="PingLun Bj-BeiJingSe" v-if="item.subComments.length">
							<template v-for="item_PingLun in item.subComments">
								<view class="_XunHuan Flex H3 SanHang">
									<text class="_NiCheng Zt-ShenLanSe">{{item_PingLun.creator.nickname}}:</text>
									<text class="iconfont icon-yuyin" v-if="item_PingLun.fileCount.audios"></text>
									<text>{{$_GuoLv_HTML(item_PingLun.content)}}</text>
								</view>
							</template>
						</view>
					</view>
				</view>
				<view
					v-if="PingLun_LieBiao_JiaZai_ZhuangTai_JiaZaiGengDuo"
					@click="QingQiu_PingLun_LieBiao('FanYe')"
					class="H3 H3-Line Bj-BeiJingSe Zt-ZhanWeiSe Flex"
					style="padding: 35rpx 0;text-align: center;margin: 25rpx;justify-content: center;border-radius: 100rpx;">点击加载更多</view>
			</view>
		</template>
		<template v-if="PingLun_LieBiao_JiaZai_ZhuangTai=='JiaZaiZhong'">
			<YouRan-UI-JiaZaiZhong LeiXing="JuBu"></YouRan-UI-JiaZaiZhong>
		</template>
		<template v-if="PingLun_LieBiao_JiaZai_ZhuangTai=='WuShuJu'">
			<view class="YouRan-UI-WuShuJu-1 Flex" style="padding: 50rpx 0;">
				<text class="iconfont icon-cry Zt-ZhanWeiSe"></text>
				<view class="Zt-ZhanWeiSe">暂无任何数据</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name:"YouRan-UI-PingLun-LieBiao",
		props:{
			PeiZhi_WenJian:String,
		},
		data() {
			return {
				PingLun_LieBiao:[],
				PingLun_LieBiao_MoRen_YeMa:2,
				PingLun_LieBiao_JiaZai_ZhuangTai:"JiaZaiZhong",
				PingLun_LieBiao_JiaZai_ZhuangTai_JiaZaiGengDuo:false,
			};
		},
		mounted(){
			this.QingQiu_PeiZhi();
		},
		methods:{
			QingQiu_PeiZhi(){
				uni.request({
					url:this.$_PeiZhi_WenJian() + this.PeiZhi_WenJian,
					method:'GET',
					success: (res) => {
						this.FanWeiShaiXuan = res.data.QieHuanKa.LieBiao[4].ShaiXuan;
						if(res.data.QieHuanKa.LieBiao[4].KaiQi){
							this.QingQiu_PingLun_LieBiao()
						}
						
					}
				})
			},
			QingQiu_PingLun_LieBiao(FanYe){
				if(FanYe){uni.showLoading({ title: "加载中" });}
				this.$_QingQiu(
					"GET","/api/v2/comment/list",
					{
						"orderType":this.FanWeiShaiXuan.FanWei_LeiXing,
						"createDate":this.FanWeiShaiXuan.FanWei_RiQi,
						"whitelistKeys":"cid,creator.uid,creator.avatar,creator.nickname,creator.nicknameColor,creator.roleName,fileCount.audios,content,files,createTimeFormat,subComments",
						"pageSize":15,
						"page":FanYe ? this.PingLun_LieBiao_MoRen_YeMa : ""
					},
					(res) => {
						if(FanYe){
							if(res.data.data.list.length){
								this.PingLun_LieBiao = this.PingLun_LieBiao.concat(res.data.data.list)
								this.PingLun_LieBiao_MoRen_YeMa++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							if(res.data.data.paginate.total > res.data.data.paginate.pageSize){
								this.PingLun_LieBiao_JiaZai_ZhuangTai_JiaZaiGengDuo = true
							}
							this.PingLun_LieBiao = res.data.data.list;
							if(this.PingLun_LieBiao.length){
								this.PingLun_LieBiao_JiaZai_ZhuangTai = "YouShuJu"
							}else{
								this.PingLun_LieBiao_JiaZai_ZhuangTai = "WuShuJu"
							}
						}
					}
				)
			},
		}
	}
</script>

<style lang="scss" scoped>
.YouRan-UI-LieBiao-3{
	.XunHuan{
		padding-bottom: 0;
		.You{
			.TieZi-XinXi{
				margin-top: 15rpx;
			}
			.PingLun{
				margin-top: 25rpx;
				margin-bottom: 25rpx;
			}
		}
	}
}
</style>